<template>
  <el-scrollbar height="400px">
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          序号
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          项目ID
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          项目名称
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          完成情况
        </div>
      </el-col>
    </el-row>

    <el-row v-for="(value,index) in res2 " :key="index">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          {{ index }}
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content  bg-purple-light">
          {{ value.id }}
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          {{ value.projectName }}
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content  bg-purple-light">
          <el-button @click="getResultRough(value.id,null,value.projectName)" v-if="value.particleSize == 'rough'">
            获取项目结果(粗)
          </el-button>
          <el-popover placement="bottom" :width="400" trigger="click">
            <template #reference>
              <el-button v-click-outside="onClickOutside" v-if="value.particleSize == 'detailed'">获取项目结果(细)</el-button>
            </template>
            <el-button @click="getResultDetailed(value.id, 'YOLO', value.projectName)">YOLO</el-button>
            <el-button @click="getResultDetailed(value.id, 'VOC', value.projectName)">VOC</el-button>
            <el-button @click="getResultDetailed(value.id, 'CSV', value.projectName)">CSV</el-button>
            <el-button @click="getResource(value.id,value.projectName)">原数据</el-button>
          </el-popover>

        </div>

      </el-col>
    </el-row>

  </el-scrollbar>


</template>

<script setup lang="ts">

import getProjectByUserId from "@/api/project/getProjectByUserId";
import {ref, unref} from "vue";
import getResult from "@/api/project/getResult";
import {ClickOutside as vClickOutside} from 'element-plus'
import getResourceById from "@/api/project/getResourceById";

// const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}

// let status :number = parseInt(sessionStorage.getItem('project.status'));

const res = getProjectByUserId(1);
let res2 = ref<[]>([]);

res.then((data) => {
  for (let i = 0; i < data.length; i++) {
    res2.value?.push(data[i])
  }
})

const getResultRough = (id: number, type: string, projectName: string) => {
  getResult(id, type, projectName + ".zip");
}

const getResultDetailed = (id: number, type: string, projectName: string) => {
  if (type == "YOLO"|| type == "VOC") {
    getResult(id, type, projectName + ".zip");
  }else {
    getResult(id, type, projectName + ".csv");
  }
}

const getResource = (id: number,projectName: string) => {
    getResourceById(id,projectName +"_original.zip");
}


</script>

<style scoped>

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>